<template>
  <div class="box">
    <el-card class="box-card">
      <el-tabs stretch v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="登录" name="uname">
          <!-- 登录 -->
          <el-form
            :model="loginForm"
            status-icon
            ref="loginForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="用户名" prop="username">
              <el-input type="text" v-model="loginForm.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitLoginForm(loginForm)">确定</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="注册" name="enroll">
          <!-- 注册 -->
          <el-form
            :model="enrollForm"
            status-icon
            ref="enrollForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="用户名" prop="username">
              <el-input type="text" v-model="enrollForm.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input type="email" v-model="enrollForm.email" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input type="password" v-model="enrollForm.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确定密码" prop="password2">
              <el-input type="password" v-model="enrollForm.password2" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitEnrollForm('enrollForm')">确定</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import api from "@/api";
import jwtDecode from "jwt-decode";
import { mapMutations } from "vuex";
export default {
  name: "Login",
  components: {},
  data() {
    var validateUsername = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("用户名不能为空"));
      } else if (value.length < 6) {
        callback(new Error("用户名长度不能小于6位"));
      }
      callback();
    };
    var validateEmail = (rule, value, callback) => {
      let reg =  /^[A-Za-zd0-9]+([-_.][A-Za-zd]+)*@([A-Za-zd]+[-.])+[A-Za-zd]{2,5}$/;
      if (value === "") {
        callback(new Error("求输入邮箱"));
      } else if(!reg.test(value)){
          callback(new Error("请正确输入邮箱"))
      }
      callback();
    };
    var validatePassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("求输入密码"));
      }
      callback();
    };
    var validateCheckPassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请确认密码"));
      } else if (value !== this.enrollForm.password) {
        callback(new Error("两次输入不一致，请重新输入"));
      }
      callback();
    };
    return {
      loginForm: {
        username: "",
        password: ""
      },
      enrollForm: {
        username: "",
        password: "",
        email: "",
        password2: ""
      },
      activeName: "uname",
      rules: {
        username: [{ validator: validateUsername, trigger: "blur" }],
        password: [{ validator: validatePassword, trigger: "blur" }],
        password2: [{ validator: validateCheckPassword, trigger: "blur" }],
        email: [{ validator: validateEmail, trigger: "blur" }]
      }
    };
  },
  mounted() {},
  methods: {
    ...mapMutations(["setToken"]),
    //   登录
    submitLoginForm() {
      api
        .login({
          username: this.loginForm.username,
          password: this.loginForm.password
        })
        .then(res => {
          console.log(res);

          if (res.status === 200) {
            if (res.data.code === 200) {
              //保存到 本地
              sessionStorage.setItem("login", res.data.token);
              // 存储到 vuex
              this.setToken(res.data.token);
              //登录成功跳转到首页
              this.$router.replace("/");
            } else {
              this.$message.error(res.data.msg);
            }
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
 
    handleClick() {},
    // 注册   ----  失败
    submitEnrollForm() {
      api
        .enroll({
          username: this.enrollForm.username,
          password: this.enrollForm.password,
          email: this.enrollForm.email
        })
        .then(res => {
            console.log(res);
            
          if(res.data.code === 200){
              this.$message({
                  $message:res.data.msg,
                  type:'success'
              })
          }else{
              this.$message.error(res.data.msg)
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>

<style scoped>
.box {
  background: url();
}
.box-card {
  width: 600px;
  margin: 0 auto;
  margin-top: 100px;
}
</style>